<template>
	<view class="my-userinfo-container">
		<!-- 头像昵称区域 -->
		<view class="top-box">
			<image :src="userinfo.img" class="avatar"></image>
			<view class="box-right">
				<view class="name">
					<view class="nickname">{{userinfo.name}}</view>
					<view class="arrow">
						<uni-icons type="arrowright" size="15"></uni-icons>
					</view>
				</view>
				<view class="userid">userid : {{userinfo.id}}</view>
			</view>
		</view>

		<!-- 面板的列表区域 -->
		<view class="panel-list">

			<!-- 我的交易 -->
			<view class="panel">
				<view class="panel-title">我的交易</view>
				<view class="panel-body">
					<navigator class="panel-item" url="/subpkg_my/fabu/fabu">
						<view class="t-icon t-icon-wodefabu"></view>
						<text>我的发布</text>
					</navigator>
					<navigator class="panel-item" url="/subpkg_my/dingdan/dingdan">
						<view class="t-icon t-icon-wodedingdan"></view>
						<text>我的订单</text>
					</navigator>
				</view>
			</view>

			<!-- 个人中心 -->
			<view class="panel">
				<view class="panel-title">个人中心</view>
				<view class="panel-body">
					<navigator class="panel-item" url="/subpkg_my/shoucan/shoucan">
						<view class="t-icon t-icon-shoucan"></view>
						<text>我的收藏</text>
					</navigator>
					<navigator class="panel-item" url="/subpkg_my/zhanghao/zhanghao">
						<view class="t-icon t-icon-zhanghaoshezhi"></view>
						<text>账号设置</text>
					</navigator>
					<navigator class="panel-item" url="/subpkg_my/dizhi/dizhi">
						<view class="t-icon t-icon-dizhi"></view>
						<text>我的地址</text>
					</navigator>

					<view class="panel-item" @click="logout">
						<view class="t-icon t-icon-tuichudenglu"></view>
						<text>退出登录</text>
					</view>
				</view>
			</view>

			<view class="panel">
				<view class="panel-body">
					<view class="panel-item">
						<button open-type="contact" class="btncontact">
							<!-- <view class="kefu"> -->
							<view class="t-icon t-icon-kefu"></view>
							<!-- </view> -->
							<text>客服中心</text>
						</button>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// 按需导入 mapState 辅助函数
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('m_user', ['userinfo']),
		},
		name: "my-userinfo",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateAddress']),


			// 退出登录
			async logout() {
				// 询问用户是否退出登录
				const succ = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)
				if (succ && succ.confirm) {
					// 用户确认了退出登录的操作
					// 需要清空 vuex 中的 userinfo、token 和 address
					this.updateUserInfo({})
					this.updateToken('')
					this.updateAddress({})
				}
			}
		}
	}
</script>

<style lang="scss">
	.my-userinfo-container {
		height: 100%;
		// 为整个组件的结构添加浅灰色的背景
		// background-color: #f4f4f4;

		.top-box {
			height: 300rpx;
			// background-color: #f4f4f4;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: left;

			.avatar {
				margin: 0 20rpx;
				display: block;
				width: 70px;
				height: 70px;
				border-radius: 45px;
				border: 2px solid white;
				box-shadow: 0 1px 5px black;
			}

			.box-right {
				display: flex;
				align-items: center;
				flex-direction: column;

				.name {
					display: flex;
					align-items: center;
					margin-bottom: 14rpx;

					.nickname {
						margin-left: 10rpx;
						color: black;
						font-weight: bold;
						font-size: 20px;
					}

					.arrow {
						margin-left: 10rpx;
					}

				}

				.userid {
					margin-left: 10px;
					color: #949494;
					font-size: 15px;
				}
			}
		}

		.panel-list {
			padding: 0 10px;
			// position: relative;
			top: -10px;

			.panel {
				background-color: white;
				border-radius: 3px;
				margin-bottom: 8px;

				.panel-title {
					line-height: 45px;
					padding-left: 10px;
					font-size: 15px;
					font-weight: bold;
					border-bottom: 1px solid #f4f4f4;
				}

				.panel-body {
					display: flex;
					justify-content: left;

					.panel-item {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						font-size: 13px;
						padding: 10px 0;
						
						text {
							margin-top: 10rpx;
						}

						.btncontact {
							// margin-top: 8px;
							// height: 60px;
							background-color: #fff;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							text {
								// margin-top: 4px;
								font-size: 13px;
							}
						}

						button::after {
							border: 0;
						}
					}
				}
			}
		}
	}

	// .btncontact {
	// 	// margin-top: 8rpx; 
	// 	// height: 400rpx;
	// 	background-color: #fff;
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: center;
	// 	align-items: center;

	// 	// .kefu {
	// 	// 	margin-top: 10rpx;
	// 	// }

	// 	text {
	// 		// margin-top: 8rpx;
	// 		font-size: 13px;
	// 	}
	// }

	// button::after {
	// 	border: 0;
	// }
</style>